<template>
  <div class="user-page page-container">
    <!-- 用户头部信息 -->
    <div class="user-header">
      <div class="user-info">
        <div class="avatar">
          <a-avatar :size="64" :src="avatar" icon="user" />
        </div>
        <div class="info">
          <h3>{{ isLogin ? nickName : '未登录' }}</h3>
          <p>{{ isLogin ? userType : '登录后体验更多功能' }}</p>
        </div>
      </div>
      <a-button 
        v-if="!isLogin" 
        type="primary" 
        class="login-btn"
        @click="goToLogin"
      >
        立即登录
      </a-button>
    </div>

    <!-- 菜单列表 -->
    <div class="menu-list">
      <!-- 基本信息 -->
      <div class="menu-section">
        <div class="section-title">账户管理</div>
        <div class="menu-item" @click="handleMenuClick('profile')">
          <a-icon type="user" />
          <span>我的详情</span>
          <a-icon type="right" class="arrow" />
        </div>
        <div class="menu-item" @click="handleMenuClick('account')">
          <a-icon type="idcard" />
          <span>账户信息</span>
          <a-icon type="right" class="arrow" />
        </div>
        <div class="menu-item" @click="handleMenuClick('security')">
          <a-icon type="safety" />
          <span>账户安全</span>
          <a-icon type="right" class="arrow" />
        </div>
      </div>

      <!-- 收益管理 -->
      <div class="menu-section">
        <div class="section-title">收益管理</div>
        <div class="menu-item" @click="handleMenuClick('invite')">
          <a-icon type="gift" />
          <span>邀请得福利</span>
          <a-icon type="right" class="arrow" />
        </div> 
        <div class="menu-item" @click="handleMenuClick('consumption')">
          <a-icon type="shopping" />
          <span>我的消费</span>
          <a-icon type="right" class="arrow" />
        </div>
      </div>

      <!-- 代理中心 -->
      <div class="menu-section" v-if="userType === '分销用户'">
        <div class="section-title">代理中心</div>
        <div class="menu-item" @click="handleMenuClick('team')">
          <a-icon type="team" />
          <span>我的团队</span>
          <a-icon type="right" class="arrow" />
        </div>
        <div class="menu-item" @click="handleMenuClick('distributorApply')">
          <a-icon type="usergroup-add" />
          <span>分销申请</span>
          <a-icon type="right" class="arrow" />
        </div>
        <div class="menu-item" @click="handleMenuClick('withdraw')">
          <a-icon type="wallet" />
          <span>我要提现</span>
          <a-icon type="right" class="arrow" />
        </div>
        <div class="menu-item" @click="handleMenuClick('withdrawHistory')">
          <a-icon type="history" />
          <span>提现记录</span>
          <a-icon type="right" class="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Avatar, Button, Icon } from 'ant-design-vue'
import { mapGetters } from 'vuex'

export default {
  name: 'User',
  components: {
    'a-avatar': Avatar,
    'a-button': Button,
    'a-icon': Icon
  },
  computed: {
    ...mapGetters({
      isLogin: 'user/isLoggedIn',
      avatar:'user/avatar',
      nickName: 'user/nickName',
      userType: 'user/userType',
    })
  },
  mounted(){
    console.log(this.isLogin)
    console.log(this.nickName)
    console.log(this.userType)
  }, 
  methods: {
    goToLogin() {
      this.$router.push({
        path: '/auth/login',
        query: { redirect: '/user' }
      })
    },
    handleMenuClick(key) {
      if (!this.isLogin) {
        this.goToLogin()
        return
      }
      if (key === 'profile') {
        this.$router.push('/user-center/profile')
      } else if(key ==='account'){
        this.$router.push('/user-center/account')
      } else if(key ==='security'){
        this.$router.push('/user-center/security')
      } else if(key ==='withdraw'){
        this.$router.push('/user-center/withdraw')
      } else if(key ==='withdrawHistory') {
        this.$router.push('/user-center/withdraw-history')
      } else if(key ==='team') {
        this.$router.push('/user-center/team')
      } else if(key ==='consumption') {
        this.$router.push('/user-center/consumption')
      } else if(key ==='distributorApply') {
        this.$router.push('/user-center/distributor-apply')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.user-page {
  padding: 16px;
  background: #f5f7fa;

  .user-header {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-info {
      display: flex;
      align-items: center;
      gap: 16px;

      .info {
        h3 {
          margin: 0 0 4px;
          font-size: 18px;
          color: #262626;
        }

        p {
          margin: 0;
          font-size: 14px;
          color: #8c8c8c;
        }
      }
    }
  }

  .menu-list {
    .menu-section {
      background: #fff;
      border-radius: 8px;
      margin-bottom: 12px;
      overflow: hidden;

      .section-title {
        padding: 12px 16px;
        font-size: 14px;
        color: #8c8c8c;
        background: #fafafa;
        border-bottom: 1px solid #f0f0f0;
      }

      .menu-item {
        display: flex;
        align-items: center;
        padding: 16px;
        cursor: pointer;
        transition: background-color 0.3s;

        &:active {
          background: #f5f5f5;
        }

        .anticon {
          font-size: 16px;
          color: #595959;
          margin-right: 12px;

          &.arrow {
            margin-right: 0;
            margin-left: auto;
            color: #bfbfbf;
          }
        }

        span {
          font-size: 14px;
          color: #262626;
        }

        &:not(:last-child) {
          border-bottom: 1px solid #f0f0f0;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .user-page {
    padding: 12px;

    .user-header {
      padding: 16px;

      .user-info {
        gap: 12px;

        .avatar {
          :deep(.ant-avatar) {
            width: 48px;
            height: 48px;
            line-height: 48px;
          }
        }

        .info {
          h3 {
            font-size: 16px;
          }

          p {
            font-size: 12px;
          }
        }
      }
    }

    .menu-list {
      .menu-section {
        .menu-item {
          padding: 12px 16px;

          .anticon {
            font-size: 14px;
            margin-right: 8px;
          }

          span {
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>